import cs from 'classnames'
import Image from 'next/image'
import Script from 'next/script'
import { useContext } from 'react'

import banner1 from '@/assets/images/banner1.png'
import lastMobile from '@/assets/images/last-mobile.png'
import { GlobalContext } from '@/context'
import useLocale from '@/utils/useLocale'

import locale from './locale/index'
import styles from './style/index.module.less'
function HomeMobile({ onSubmit }: { onSubmit: (_: boolean) => void }) {
  const t = useLocale(locale)
  const { lang } = useContext(GlobalContext)
  return (
    <>
      <Script
        id="stripe-js"
        src="/wow.js"
        onLoad={() => {
          new WOW({
            boxClass: 'wow',
            animateClass: 'animated',
            offset: 20,
            mobile: true,
            live: true,
            callback: null,
            scrollContainer: null,
          }).init()
        }}
      />
      {/* 首屏 */}
      <div className={cs('w-full h-screen relative', styles['banner'])}>
        {/* 蒙板 */}
        <div className=" w-full h-full">
          <div className={cs('flex h-full')}>
            <div className={styles['item']}></div>
            <div className={styles['item']}></div>
            <div className={styles['item']}></div>
            <div className={styles['item']}></div>
            <div className={styles['item']}></div>
            <div className={styles['item']}></div>
            <div className={styles['item']}></div>
            <div className={styles['item']}></div>
            <div className={styles['item']}></div>
            <div className={styles['item']}></div>
          </div>
        </div>
        {/* 文案 */}
        <div
          className={cs(
            ' absolute left-0 top-0 w-full h-full flex flex-col justify-end px-6 pb-10'
          )}
        >
          <div>
            <div>
              <Image
                className=""
                src="/logo.svg"
                alt="logo Logo"
                width={139}
                height={56}
                priority
              />
            </div>
            <div className="py-[18px] font-bold text-4xl text-[#16202D] Roboto">
              {t['banner-text']}
            </div>
            <div className={cs('font-normal leading-normal text-base  Avenir', styles['descRef1'])}>
              <span>{t['banner-desc']}</span>
            </div>
          </div>
        </div>
      </div>
      {/* 第二部分头部 */}
      <div>
        <div className={cs('wow fadeInUp', 'text-[40px] w-[253px] font-bold px-6 Roboto pt-14')}>
          {t['banner1-title']}
        </div>
        <div className={cs('w-full py-8 px-6 flex max-w-md')}>
          <div className={cs('flex-1 overflow-hidden rounded-full aspect-square')}>
            <Image src={banner1} alt="logo Logo" className="w-full h-full" priority />
          </div>
        </div>
      </div>

      {/* 第二部分内容 */}
      <div className="wow slideInUp w-full px-6 ">
        <div className="Roboto font-normal text-[28px] text-[#16202D] leading-tight pb-4">
          {t['banner1-text']}
        </div>
        <div
          className="flex Avenir font-normal text-base text-[#7a7a7a]"
          style={{ lineHeight: '1.5' }}
        >
          <div className={cs('pr-2')}>-</div>
          <div className={cs('flex-1 leading-normal ')}> {t['banner1-desc']}</div>
        </div>
        <div className="flex Avenir font-normal text-base text-[#7a7a7a]">
          <div className={cs('pr-2 leading-normal')}>-</div>
          <div className="leading-normal flex-1">{t['banner1-desc1']}</div>
        </div>
        <div className="flex Avenir font-normal text-base text-[#7a7a7a]">
          <div className={cs('pr-2 leading-normal')}>-</div>
          <div className="leading-normal flex-1">{t['banner1-desc2']}</div>
        </div>
        <div className="flex Avenir font-normal text-base text-[#7a7a7a]">
          <div className={cs('pr-2 leading-normal')}>-</div>
          <div className="leading-normal flex-1">{t['banner1-desc3']}</div>
        </div>
        <div className="flex Avenir font-normal text-base text-[#7a7a7a]">
          <div className={cs('pr-2 leading-normal')}>-</div>
          <div className="leading-normal flex-1">{t['banner1-desc4']}</div>
        </div>
        {lang === 'en-US' && (
          <div className="flex Avenir font-normal text-base text-[#7a7a7a]">
            <div className={cs('pr-2 leading-normal')}>-</div>
            <div className="leading-normal flex-1">{t['banner1-desc5']}</div>
          </div>
        )}
      </div>
      <div className={'py-8 px-6'}>
        <div className={cs(styles['hr'])}></div>
      </div>

      <div className="wow slideInUp w-full px-6 ">
        <div className="Roboto font-normal text-[28px] text-[#16202D] leading-tight pb-4">
          {t['banner2-text']}
        </div>
        <div className="flex Avenir font-normal text-base leading-normal text-[#7a7a7a]">
          <div className={cs('pr-2')}>-</div>
          <div className="leading-normal flex-1">{t['banner2-desc']}</div>
        </div>
        <div className="flex Avenir font-normal text-base leading-normal text-[#7a7a7a]">
          <div className={cs('pr-2')}>-</div>
          <div className="leading-normal flex-1">{t['banner2-desc1']}</div>
        </div>
        <div className="flex Avenir font-normal text-base leading-normal text-[#7a7a7a]">
          <div className={cs('pr-2')}>-</div>
          <div className="leading-normal flex-1">{t['banner2-desc2']}</div>
        </div>
      </div>
      <div className={'py-8 px-6'}>
        <div className={cs(styles['hr'])}></div>
      </div>

      <div className="wow slideInUp w-full px-6 pb-12">
        <div className="Roboto font-normal text-[28px] text-[#16202D] leading-tight pb-4">
          {t['banner3-text']}
        </div>
        <div className="flex Avenir font-normal text-base leading-normal text-[#7a7a7a]">
          <div className={cs('pr-2')}>-</div>{' '}
          <div className="leading-normal flex-1">{t['banner3-desc']}</div>
        </div>
        <div className="flex Avenir font-normal text-base leading-normal text-[#7a7a7a]">
          <div className={cs('pr-2')}>-</div>
          <div className="leading-normal flex-1">{t['banner3-desc1']}</div>
        </div>
        <div className="flex Avenir font-normal text-base leading-normal text-[#7a7a7a]">
          <div className={cs('pr-2')}>-</div>
          <div className="leading-normal flex-1">{t['banner3-desc2']}</div>
        </div>
        <div className="flex Avenir font-normal text-base leading-normal text-[#7a7a7a]">
          <div className={cs('pr-2')}>-</div>
          <div className="leading-normal flex-1">{t['banner3-desc3']}</div>
        </div>
        <div className="flex Avenir font-normal text-base leading-normal text-[#7a7a7a]">
          <div className={cs('pr-2')}>-</div>
          <div className="leading-normal flex-1">{t['banner3-desc4']}</div>
        </div>
        <div className="flex Avenir font-normal text-base leading-normal text-[#7a7a7a]">
          <div className={cs('pr-2')}>-</div>
          <div className="leading-normal flex-1">{t['banner3-desc5']}</div>
        </div>
        <div className="flex Avenir font-normal text-base leading-normal text-[#7a7a7a]">
          <div className={cs('pr-2')}>-</div>
          <div className="leading-normal flex-1">{t['banner3-desc6']}</div>
        </div>
        <div className="flex Avenir font-normal text-base leading-normal text-[#7a7a7a]">
          <div className={cs('pr-2')}>-</div>
          <div className="leading-normal flex-1">{t['banner3-desc7']}</div>
        </div>
        <div className="flex Avenir font-normal text-base leading-normal text-[#7a7a7a]">
          <div className={cs('pr-2')}>-</div>
          <div className="leading-normal flex-1">{t['banner3-desc8']}</div>
        </div>
        <div className="flex Avenir font-normal text-base leading-normal text-[#7a7a7a]">
          <div className={cs('pr-2')}>-</div>
          <div className="leading-normal flex-1">{t['banner3-desc9']}</div>
        </div>
        <div className="flex Avenir font-normal text-base leading-normal text-[#7a7a7a]">
          <div className={cs('pr-2')}>-</div>
          <div className="leading-normal flex-1">{t['banner3-desc10']}</div>
        </div>
      </div>

      {/* 尾部 */}
      <div>
        <Image src={lastMobile} alt="logo Logo" className={cs('w-full h-auto')} />
        <div className={cs('px-4 pt-12')}>
          <div className="wow fadeInUp  Roboto text-4xl font-bold leading-tight">
            {t['last-text']}
          </div>
          <div
            className="wow fadeInUp Avenir text-base  leading-normal pt-[18px] text-[#7a7a7a]"
            data-wow-delay="0.1s"
          >
            {t['last-desc']}
          </div>
        </div>

        <div
          className={cs('wow fadeInUp ', styles['button'], ' relative')}
          data-wow-delay="0.2s"
          onClick={() => {
            onSubmit(true)
          }}
        >
          <div className={cs(styles['button-bg'])}></div>
          <div className=" absolute left-0 top-0 w-full h-full flex items-center  justify-center z-20 Roboto px-4">
            {t['button']}

            <Image
              className={cs(
                styles['button-arrow'],
                lang === 'en-US' ? 'ml-4' : cs('mr-4', styles['rtl-button-row'])
              )}
              src="/arrow.svg"
              alt="logo Logo"
              width={16}
              height={16}
              priority
            />
            <Image
              className={cs(
                styles['button-arrow1'],
                lang === 'en-US' ? 'ml-4' : cs('mr-4', styles['rtl-button-row'])
              )}
              src="/arrow1.svg"
              alt="logo Logo"
              width={16}
              height={16}
              priority
            />
          </div>
        </div>
      </div>
    </>
  )
}
export default HomeMobile
